<template>

  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.showClose"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">


    <el-row :gutter="30">
      <el-col :span="4">
        <el-image fit="contain" style="background-color: #000000"
                  :src="require('@/assets/images/collect/musicBox2.gif')"></el-image>
      </el-col>

      <el-col :span="20">
        <el-descriptions title="" :column="2" :size="size">
          <el-descriptions-item label="歌曲名称">{{music.name}}</el-descriptions-item>
          <el-descriptions-item label="歌手">{{music.singer}}</el-descriptions-item>
          <el-descriptions-item label="评分">
            <el-rate disabled v-model="music.grade"></el-rate>
          </el-descriptions-item>
          <el-descriptions-item label="音乐类型">
            <el-tag :size="tagSize">{{music.musicTypeName}}</el-tag>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              专辑
            </template>
            {{music.album}}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              作词
            </template>
            {{music.lyrics}}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              发行时间
            </template>
            {{getFullDate(music.dateOfIssue)}}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-alarm-clock"></i>
              录入时间
            </template>
            {{getTime(music.createTime)}}
          </el-descriptions-item>

        </el-descriptions>
      </el-col>
    </el-row>



    <el-row style="margin-top: 10px">
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" direction="vertical" :column="3" :size="size" border>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-document"></i>
              个人点评
            </template>
            {{music.comment}}
          </el-descriptions-item>
        </el-descriptions>

      </el-col>
    </el-row>

    <span slot="footer" class="dialog-footer">
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>


</template>

<script>
  import {getFullTime, getFullDate} from "../../utils/utils";

  export default {
    name: "MusicDetailed.vue",
    data(){
      return {
        // 默认值，进入页面后的值
        defaultValue: {
          // 弹出框标题
          title: '详情',
        },
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          show: false,
          // 是否显示关闭按钮
          showClose: true,
        },
        // 音乐信息
        music: {
          name: null,
          typeId: null,
          album: null,
          singer: null,
          musicTypeName: null,
          lyrics: null,
          dateOfIssue: null,
          comment: null,
          grade: null,
        },
        // 列表的尺寸
        size: 'small',
        // tag 的大小
        tagSize: 'small',
      }
    },
    methods: {
      /**
       * 打开音乐详情
       * @param obj 音乐信息
       */
      openMusicDetailed(obj){
        this.music = obj
        this.tableConfig.show = true
        this.$store.commit('navigationListChange', ['我的音乐', '详情'])
      },
      /**
       * 转换时间戳为时间格式
       */
      getTime(item){
        return getFullTime(item)
      },
      /**
       * 发行时间转日期
       * @param item 要转换的时间戳
       * @return {string}
       */
      getFullDate(item){
        return getFullDate(item)
      },
    }
  }
</script>

<style scoped>

</style>
